<template>
  <div class="footer">
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="首页" :class="index===0?'is-selected':''">
        <i slot="icon" class="iconfont icon-shouye"></i>
        首页
      </mt-tab-item>
      <mt-tab-item id="分类" :class="index===1?'is-selected':''">
        <i slot="icon" class="iconfont icon-fenlei-"></i>
        分类
      </mt-tab-item>
      <mt-tab-item id="购物车" :class="index===2?'is-selected':''">
        <i slot="icon" class="iconfont icon-gouwuche"></i>
        购物车
      </mt-tab-item>
      <mt-tab-item id="个人中心" :class="index===3?'is-selected':''">
        <i slot="icon" class="iconfont icon-gerenzhongxin"></i>
        个人中心
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: ['index'],
  data () {
    return {
      selected: '/pages/home/home'
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {},
  watch: {
    selected (val) {
      switch (val) {
        case '首页':
          this.$router.push('/')
          break
        case '分类':
          this.$router.push('/views/sort/sort')
          break
        case '购物车':
          this.$router.push('/views/shopcart/shopcart')
          break
        default :
          this.$router.push('/views/personal/personal')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  .mint-tabbar {
    .is-selected {
      background: $mainBackColor;
      color: $mainColor;
    }
  }
}
</style>
